<template>
<div class="layerRtb layerRtb-threecolumn layerRtb-right">
    <three-title :title="{name:'材料详情'}" :close="false">
        <span tag="i" class="rig_close fr" @click="$parent.$parent.clickFourShow()"></span>
    </three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
        <div class="analyItem">
            <p class="analyItemTit tx-center">进度</p>
            <div class="analyItemCon">
                <div v-if="datalist !== null && datalist.orderFlow.length > 0 ">
                    <el-steps :active="sepindex" align-center>
                        <el-step v-for="(item, index) in datalist.orderFlow" :key="index" :title="item.title" :description="item.execTime"></el-step>
                    </el-steps>
                </div>
                <div v-else>
                    <span class="tx-center">暂无进度</span>
                </div>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">店铺</p>
            <div class="analyItemCon">
                <div v-if="datalist !== null && datalist.shopInfo !== null">
                    <div class="col-md-6 lh22"><span class="cLightGray pr8">名称</span><span>{{shopInfo.compName ? shopInfo.compName : '暂无'}}</span></div>
                    <div class="col-md-6 lh22"><span class="cLightGray pr8">类型</span><span>{{shopInfo.shopName ? shopInfo.shopName : '暂无'}}</span></div>
                    <div class="col-md-6 lh22"><span class="cLightGray pr8">地址</span><span>{{shopInfo.cityName ? shopInfo.cityName : '暂无'}}</span></div>
                    <div class="col-md-6 lh22"><span class="cLightGray pr8">订单数</span><span>{{shopInfo.orderCount ? shopInfo.orderCount : '暂无'}}</span></div>
                </div>
                <div v-else>
                    <span class="tx-center">暂无数据</span>
                </div>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">材料清单</p>
            <div class="analyItemCon">
                <div v-if="datalist !== null && materialItems.length > 0">
                    <table class="col-md-12">
                        <thead>
                            <tr>
                                <th width="10%">名称</th>
                                <th width="10%">品牌</th>
                                <th width="10%">规格</th>
                                <th width="20%">型号</th>
                                <th width="8%">数量</th>
                                <th>图片</th>
                            </tr>
                        </thead>
                    </table>
                    <div class="scroll-content thinScroll thinScroll-table" v-loading="loading" v-scrollHeight="700">
                        <table class="col-md-12">
                            <tbody>
                                <tr v-for="(item, index) in materialItems" :key="index">
                                    <td width="10%">{{item.productData && item.productData.matName !== null ?  (item.productData.matName) : '无'}}</td>
                                    <td width="10%">{{item.productData && item.productData.brandName !== null ?  (item.productData.brandName) : '无'}}</td>
                                    <td width="10%">{{item.productData && item.productData.valueList.length > 0 ? item.productData.valueList[0].paraValue !== null ? item.productData.valueList[0].paraValue : '无': '无'}}</td>
                                    <td width="20%">{{item.productData && item.productData.matSpec !== null ? item.productData.matSpec : '无'}}</td>
                                    <td width="8%">{{item.alreadyCount !== null ? item.alreadyCount : 0 }}</td>
                                    <td>
                                        <div v-if="item.productData && item.productData.imgList.length > 0">
                                            <rx-viewer :images="item.productData.imgList">
                                                <div class="clearfix">
                                                    <div class="fl mr10" v-for="(item, index) of item.productData.imgList" :key="index">
                                                        <img :src="item | smallImg(30, 30)" :alt="index">
                                                    </div>
                                                </div>
                                            </rx-viewer>
                                        </div>
                                        <div v-else>
                                           <img src="https://proj01.oss-cn-beijing.aliyuncs.com/common/1572060039EDheHQcxbw.png?x-oss-process=image/resize,m_fill,h_80,w_80,limit_0" :alt="index" width="30px" heigth="30px">
                                        </div>
                                   </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div v-else>
                    <span class="tx-center">暂无数据</span>
                </div>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">现场</p>
            <div class="analyItemCon">
                <div v-if="datalist !== null && datalist.photoItems.length > 0">
                    <div class="fl ml10" v-for="(item, index) in datalist.photoItems" :key="index">
                        <rx-viewer>
                            <div class="clearfix">
                                <div class="col-md-4">
                                    <img :src="item | smallImg(80, 80)" :alt="index">
                                </div>
                            </div>
                        </rx-viewer>
                    </div>
                </div>
                <div v-else>
                    <span class="tx-center">暂无数据</span>
                </div>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">评价</p>
            <div class="analyItemCon">
                <div v-if="datalist !== null && datalist.evaluateOrder.evaluateStar !== undefined" class="col-md-12" >
                    <div class="col-md-6 lh22"><span class="cLightGray pr8">评价</span><span>{{datalist.evaluateOrder.evaluateStar}}星</span></div>
                    <div class="col-md-6 lh22"><span class="cLightGray pr8">印象</span><span :title="datalist.evaluateOrder.evaluateReamrk">{{datalist.evaluateOrder.evaluateReamrk}}</span></div>
                    <div class="col-md-6 lh22"><span class="cLightGray pr8 ">时间</span><span>{{datalist.evaluateOrder.time}}</span></div>
                    <div class="col-md-12 lh22"><span class="cLightGray pr8 ">描述</span><span v-if="datalist.evaluateOrder.markItems.length > 0">
                        <span v-for="(item, index) in datalist.evaluateOrder.markItems" :key="index">{{item}}&nbsp;</span>
                        </span>
                    </div>
                    <div class="col-md-12 mt10"><span class="cLightGray pr8" style="position:relative;top:-50px">图片</span><span>
                        <img :src="item" style="width: 60px;height: 60px;" v-for="(item, index) in datalist.evaluateOrder.photos" :key="index"></span>
                    </div>
                </div>
                <div v-else>
                    <span class="tx-center">尚未评价</span>
                </div>
            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
            </div>
        </div>
    </div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { GetOrderDetailsByClient } from '../../../Resources/Api/index'
export default {
    props: [
        'orderid'
    ],
    data () {
        return {
            loading: true,
            datalist: null,
            sepindex: 1,
            tableData: [],
            shopInfo: null, // 店铺信息
            materialItems: [] // 材料信息
        }
    },
    computed: {
        ...mapGetters(['leftInfo', 'userInfo'])
    },
    created () {
        this.load()
    },
    methods: {
        load () {
            let _this = this
            GetOrderDetailsByClient({
                orderId: this.orderid
            }).then((result) => {
                this.loading = false
                _this.datalist = result.data.body
                if (this.datalist !== null) {
                    this.shopInfo = this.datalist.shopInfo
                    this.materialItems = this.datalist.materialItems
                }
                for (let index = 0; index < this.datalist.orderFlow.length; index++) {
                    const element = this.datalist.orderFlow[index]
                    if (element.state === '进行中') {
                        this.sepindex = index
                    }
                }
            }).catch((err) => {
                console.log(err)
            })
        },
        clickFourShow (index) {
            this.fourIndex = index
        }

    }
}
</script>
